<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022-05-24 15:44:27
 */
import {useConfig, useStore, usePages, useAccount} from "~/store"
import $router from '~/router'
import {isDark} from '~/composables'

const $store = useStore()
const $config = useConfig()
const $pages = usePages()
const $account = useAccount()
const layout_pages_wrapper_height = computed(() => {
  return `${$config.value.layout.pages}px`
})
const closePage = (key) => {
  if (key === 0) return
  if (!$pages.value[$account.value.account][key].disabled) {
    $router.push($pages.value[$account.value.account][key - 1].path)
  }
  $pages.value[$account.value.account].splice(key, 1)
}

const openPage = (info) => {
  $router.push(info.path)
}
const scrollbar_ref = ref(null)
const scrollbarRef = (e) => {
  scrollbar_ref.value = e
}
const scrollbarRight = () => {
  scrollbar_ref.value.scrollBy(99999)
}
const scrollbarLeft = () => {
  scrollbar_ref.value.scrollTo(0)
}
const x = ref(0)
const y = ref(0)
const options = [{
  label: '关闭当前',
  key: 'close',
  props: {
    onClick: () => {
      closePage(active_key.value)
      onClickOutside()
    }
  }
}, {
  label: '关闭其他',
  key: 'close_other',
  props: {
    onClick: () => {
      let pages_value = [$pages.value[$account.value.account][0]]
      if (active_key.value !== 0) {
        pages_value.push($pages.value[$account.value.account][active_key.value])
      }
      $pages.value[$account.value.account] = pages_value
      openPage(pages_value[pages_value.length - 1])
      onClickOutside()
    }
  }
}, {
  label: '关闭所有',
  key: 'close_all',
  props: {
    onClick: () => {
      let pages_value = [$pages.value[$account.value.account][0]]
      $pages.value[$account.value.account] = pages_value
      openPage(pages_value[0])
      onClickOutside()
    }
  }
}, {
  label: '关闭左侧',
  key: 'close_left',
  props: {
    onClick: () => {
      if (active_key.value !== 0) {
        let pages_value = [$pages.value[$account.value.account][0]]
        let active = 1
        for (let i = active_key.value; i < $pages.value[$account.value.account].length; i++) {
          if (!$pages.value[$account.value.account][i].disabled) active = i - active_key.value + 1;
          pages_value.push($pages.value[$account.value.account][i])
        }
        $pages.value[$account.value.account] = pages_value
        openPage(pages_value[active])
      }
      onClickOutside()
    }
  }
}, {
  label: '关闭右侧',
  key: 'close_right',
  props: {
    onClick: () => {
      let pages_value = [$pages.value[$account.value.account][0]]
      let active = active_key.value
      for (let i = 1; i <= active_key.value; i++) {
        if (!$pages.value[$account.value.account][i].disabled) active = i;
        pages_value.push($pages.value[$account.value.account][i])
      }
      $pages.value[$account.value.account] = pages_value
      openPage(pages_value[active])
      onClickOutside()
    }
  }
}];
const dropdown_show = ref(false)
const active_key = ref(0)
const handleContextMenu = (e, key) => {
  active_key.value = key
  e.preventDefault()
  dropdown_show.value = false
  nextTick().then(() => {
    dropdown_show.value = true
    x.value = e.clientX
    y.value = e.clientY
  })
}
const onClickOutside = () => {
  active_key.value = 0
  dropdown_show.value = false
}
</script>
<template>
  <div class="layout_pages_wrapper" px-2>
    <n-button @click="scrollbarLeft()" text mx-1 size="small">
      <div class="page_scrollbar_icon_wrapper" i-ic-round-chevron-left></div>
    </n-button>
    <n-scrollbar :ref="scrollbarRef" :x-scrollable="true">
      <div class="layout_pages_wrapper">
        <n-button @contextmenu="(e)=>{handleContextMenu(e,pk)}" mx-1 size="small" class="page_item_wrapper"
                  tertiary :type="pi.disabled?'default':'primary'"
                  v-for="(pi,pk) in $pages[$account.account]" :key="pk">
          <div @click="openPage(pi)" class="page_item_cover_wrapper"></div>
          <div class="page_item_button_wrapper">
            <div>{{ pi.title }}</div>
            <n-icon @click="closePage(pk)" class="page_item_icon_wrapper" v-if="pk !== 0">
              <div i-ic-round-close></div>
            </n-icon>
          </div>
        </n-button>
      </div>
    </n-scrollbar>
    <n-button @click="scrollbarRight()" text mx-1 size="small">
      <div class="page_scrollbar_icon_wrapper" i-ic-round-chevron-right></div>
    </n-button>
    <n-dropdown :on-clickoutside="onClickOutside" :show="dropdown_show" placement="bottom-start" trigger="manual" :x="x"
                :y="y" :options="options"></n-dropdown>
  </div>
</template>
<style scoped>
.page_scrollbar_icon_wrapper {
  font-size: 20px;
}

.page_item_button_wrapper {
  display: flex;
}

.page_item_wrapper:hover .page_item_icon_wrapper {
  margin-left: 5px;
  width: 14px;
  height: 14px;
}

.page_item_icon_wrapper {
  width: 0;
  height: 0;
  font-size: 14px;
  overflow: hidden;
  transition: all .2s ease;
  position: relative;
  z-index: 2;
}

.page_item_cover_wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}

.layout_pages_wrapper {
  height: v-bind(layout_pages_wrapper_height);
  display: flex;
  align-items: center;
}
</style>
